<template>
  <div class="home">
    <Layout>
      <div class="page" slot="content">
        <router-view />
      </div>
      <van-tabbar :fixed="false" v-model="active" route slot="footer" active-color="#29A1F7" inactive-color="#FFC0C8">
        <van-tabbar-item name="home" replace icon="star" to="/pageContent">流星</van-tabbar-item>
        <van-tabbar-item name="fireworks" replace icon="star" to="/fireworks">
          烟花
          <template #icon="props">
            <i style="font-size: inherit" :class="props.active?'iconfont icon-yanhua':'iconfont icon-yanhua'"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item name="coffee" replace to="/coffee">
          小酒窝
          <template #icon="props">
            <i style="font-size: inherit" :class="props.active?'iconfont icon--wanjuxiong':'iconfont icon--wanjuxiong'"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item name="me" replace to="/WenWen">
          Love
          <template #icon="props">
            <i style="font-size: inherit" :class="props.active?'iconfont icon-aiqingqinglv':'iconfont icon-aiqingqinglv'"></i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </Layout>
  </div>
</template>

<script>
import Layout from '@/components/Layout.vue';

export default {
  name: 'Home',
  components: {
    Layout,
  },
  data() {
    return {
      active: 'home',
    };
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  width: 100%;
  // background: red;
  .page {
    width: 100%;
    height: 100%;
    overflow: auto;
    /deep/ .van-tabbar {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
